<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>日志管理</title>
    <link href="/assets/images/favicon.ico" rel="icon">
    <link rel="stylesheet" href="/assets/libs/layui/css/layui.css" />
    <link rel="stylesheet" href="/assets/module/admin.css?v=318" />

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="/assets/libs/layui/layui.js"></script>
    <script type="text/javascript" src="/assets/js/common.js?v=318"></script>

    <style>
        .layui-table-page {
            position: relative;
            margin-top: 0px; /* 可根据需要调整上边距 */
        }
      .layui-card-body{
          margin-top: 50px;
          padding-top: 10px;
       }
      .layui-card-header{
          padding-top: 10px;
      }
        .layui-btn{
            margin-left: 15px;
        }


    </style>
    <script type="text/javascript">
        var url = window.location.pathname.substring(1);
        var item = url.split("/");
        var C = item[0];
        var A = item[1];
        var cUrl = "/" + C;
    </script>
</head>

<body>

<div>
    <div class="layui-card">

        <div class="layui-card-header">
            <form class="layui-form" id="searchForm">
                <!-- 审阅状态选择下拉框 -->
                <div class="layui-inline">
                    <label class="layui-form-label">审阅状态</label>
                    <div class="layui-input-inline">
                        <select name="state" lay-verify="required" lay-filter="stateFilter">
                            <option value="">请选择</option>
                            <option value="1">已审阅</option>
                            <option value="0">未审阅</option>
                        </select>
                    </div>
                </div>

                <!-- 日期选择输入框 -->
                <div class="layui-inline">
                    <label class="layui-form-label">日志日期</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="ID-laydate-demo" placeholder="选择日期"
                               autocomplete="off">
                    </div>
                </div>
                <!-- 培训项目 -->
                <div class="layui-inline">
                    <label class="layui-form-label">培训项目</label>
                    <div class="layui-input-inline">
                        <select id="projectSelect" name="project">
                            <option value="">请选择项目</option>
                            <option
                                    th:each="item:${projectNameList}"
                                    th:text="${item}"
                                    th:value="${item}">
                            </option>
                        </select>
                    </div>
                </div>


                <!-- 所属班级 -->
                <div class="layui-inline">
                    <label class="layui-form-label">班级</label>
                    <div class="layui-input-inline">
                        <select id="classSelect" name="classs">
                            <option value="">请选择班级</option>
                            <option
                                    th:each="item : ${classesNameList}"
                                    th:text="${item}"
                                    th:value="${item}">
                            </option>
                        </select>
                    </div>
                </div>
                <!-- 姓名 -->
                <div class="layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input id="tbName" type="text" name="name" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <!-- 按钮区域 -->
                <div class="layui-inline">
                    <div class="layui-input-inline" style="width: auto;">
                        <button id="search" class="layui-btn" lay-submit="" lay-filter="searchForm">
                            <i class="layui-icon layui-icon-search"></i> 查询
                        </button>
                    </div>
                </div>

            </form>
    </div>

    <div class="layui-card-body">

        <table class="layui-hide" id="tableList" lay-filter="tableList"></table>

        <script type="text/html" id="barTable">
            <div class="layui-clear-space">
                <a class="layui-btn layui-btn-xs" lay-event="edit">审阅</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </div>
        </script>


        <script th:inline="none">

            layui.use(['table', 'form', 'layer', 'laydate'], function () {
                var $ = layui.jquery;
                var layer = layui.layer;
                var form = layui.form;
                var table = layui.table;
                var laydate = layui.laydate;
                var projectNameList = [];
                var classesNameList = [];

                // 标记日期选择器是否初始化完成，初始化为false
                window.datePickerInitialized = false;

                // 渲染表格
                table.render({
                    elem: '#tableList',
                    url: '/log/infoLogAll',
                    method: 'post',
                    title: '用户数据',
                    cellMinWidth: 80,
                    cols: [[
                        {
                            title: '序号', width: 80, templet: function (d) {
                                return d.LAY_TABLE_INDEX + 1
                            }
                        },
                        { field: 'id', title: 'ID', width: 80, hide: true },
                        { field: 'name', title: '用户名', width: 100 },
                        { field: 'department', title: '工作单位', width: 200 },
                        { field: 'tel', title: '电话', width: 200 },
                        { field: 'projectName', title: '项目', width: 200 },
                        { field: 'className', title: '班级', width: 80 },
                        { field: 'logDate', title: '提交日期', width: 200, templet: function (d) {
                                // 检查logDate字段是否存在且是字符串的类型
                                if (d.logDate && typeof d.logDate === 'string') {
                                    return d.logDate.replace('T', ' ');
                                }
                                return d.logDate;
                            }
                        },
                        { field: 'state', title: '审阅状态', width: 100,
                            templet: function (d) {
                                if (d.state === 1) {
                                    return '已审阅';
                                } else {
                                    return '未审阅'
                                }// 如果状态值不是0或1的情况，返回默认提示
                            }
                        },
                        { fixed: 'right', title: '操作', width: 200, templet: '#barTable' }
                    ]],
                    page: true,
                    limit: 10,
                    limits: [10, 100, 150, 200],
                    id: 'tableList',
                    done: function(e){
                        $('.layui-table').css("width", "100%");
                        $("th[data-field='delete']").css("border-right", 'none');
                    }
                });
                // 初始化项目和班级数据
                $(document).ready(function () {
                    Promise.all([
                        $.ajax({
                            url: '/project/listProjectName',
                            type: 'GET',
                            success: function (data) {
                                projectNameList = data.data;
                                // 填充项目下拉框
                                var projectSelect = $('#projectSelect');
                                projectSelect.empty(); // 清空现有内容
                                projectSelect.append('<option value="">请选择项目</option>'); // 添加默认项
                                projectNameList.forEach(function (item) {
                                    projectSelect.append('<option value="' + item + '">' + item + '</option>');
                                });
                                form.render('select'); // 渲染下拉框
                                console.log(projectNameList)
                            }
                        }),
                        $.ajax({
                            url: '/class/listClassName',
                            type: 'GET',
                            success: function (data) {
                                classesNameList = data.data;
                                // 填充项目下拉框
                                var classSelect = $('#classSelect');
                                classSelect.empty(); // 清空现有内容
                                classSelect.append('<option value="">请选择班级</option>'); // 添加默认项
                                classesNameList.forEach(function (item) {
                                    classSelect.append('<option value="' + item + '">' + item + '</option>');
                                });
                                form.render('select'); // 渲染下拉框
                                console.log(classesNameList)
                            }
                        })
                        ]).then(function () {
                    }).catch(function (error) {
                        console.error(error);
                    });
                });
                // 初始化日期选择器，并在完成初始化后标记为已完成
             laydate.render({
                    elem: '#ID-laydate-demo',
                    done: function (value) {
                        window.datePickerInitialized = true;
                    }
                });

                // 监听审阅状态下拉框的选择事件
                form.on('select(stateFilter)', function (data) {
                    // 暂存审阅状态值，后续综合查询时使用
                    var stateValue = data.value;
                });

                // 点击综合查询按钮触发查询操作，利用form的提交验证回调机制
                $('#search').click(function () {
                    var stateValue = $('select[name="state"]').val();
                    var dateValue = $('#ID-laydate-demo').val();
                    var idValue = $('#tbName').val();
                    // 检查日期选择器是否初始化完成以及表单是否验证通过（利用form的验证机制）
                    if (window.datePickerInitialized && form.verify()) {
                       table.reload('tableList', {
                            url: '/log/infoLogAll',
                            method: 'post',
                            where: {
                                state: stateValue,
                                logDate: dateValue,
                                name:idValue,
                                projectName: $('#projectSelect').val(),
                                className: $('#classSelect').val(),
                            },
                            page: {
                                curr: 1
                            }
                        });

                    }
                });

                // 监听工具条
                table.on('tool(tableList)', function (obj) {
                    var data = obj.data;
                    if (obj.event == 'edit') {
                  layer.open({
                            type: 2,
                            title: '审阅用户',
                            fixed: false,
                            maxmin: true,
                            area: ['100%', '100%'],
                            offset: 'auto',
                            content: '/log/form?id=' + data.id
                  });
                    console.log("sssss")

                    }
                    if (obj.event == 'del') {
                        var postDate = { id: data.id };
                        layer.confirm('是否要删除该条数据？', function (obj) {
                            $.ajax({
                                type: 'POST',
                                url: "/log/del",
                                data: postDate,
                                dataType: 'json',
                                beforeSend: function () {
                                },
                                success: function (res) {
                                    if (res.code == 200) {
                                        var stateValue = $('select[name="state"]').val();
                                        var dateValue = $('#ID-laydate-demo').val();
                                        var idValue = $('#tbName').val();
                                        table.reload('tableList', {
                                            url: '/log/infoLogAll',
                                            method: 'post',
                                            where: {
                                                state: stateValue,
                                                logDate: dateValue,
                                                name:idValue,
                                                projectName: $('#projectSelect').val(),
                                                className: $('#classSelect').val(),
                                            },
                                            done: function (res, curr, count) {
                                                if (res.data.length === 0 && curr > 1) {
                                                    curr--;
                                                    table.reload('tableList', {
                                                        url: '/log/infoLogAll',
                                                        method: 'post',
                                                        where: {
                                                            state: stateValue,
                                                            logDate: dateValue,
                                                            name:idValue,
                                                            projectName: $('#projectSelect').val(),
                                                            className: $('#classSelect').val(),
                                                        },
                                                        page: {
                                                            curr: curr
                                                        }

                                                    })

                                                }
                                                $('.layui-table').css("width", "100%");
                                                $("th[data-field='delete']").css("border-right", 'none');

                                            }

                                        });
                                        layer.msg(res.msg);
                                    } else {
                                        layer.msg(res.msg, {
                                            icon: 2,
                                            anim: 6
                                        });
                                    }

                                }

                            });
                            layer.close(index);
                        })

                    }
                });

            })
        </script>

    </div>
</div>
</div>

<footer>
    <!-- JS部分 -->
    <script type="text/javascript">
        var url = window.location.pathname.substring(1);
        var item = url.split("/");
        var jsUrl = "/static/module/javaweb_" + item[0] + ".js";
        document.write("<script src='" + jsUrl + "'><\/script>");
    </script>
</footer>
</body>

</html>